<script type="text/javascript" language="javascript" charset="utf-8">
$(".header-con li a").removeClass("open-menu");
$(".header-con li #statistical_datum").addClass("open-menu");
</script>
<script src="/assets/js/echarts.common.min.js"></script>

<div class="boxed clearfix">
  <div class="common-tit">
    <h2>课程数据</h2>
    <span>数据统计 > 课程数据</span>
    <div class="cours-gbtn">
      <div class="list-box">
        <div class="downbtn">
          <span>全部分店</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
          <li data_id="all">全部分店</li>
          <% @studios.each do |stu| %>
            <li data_id="<%= stu.id %>"><%= stu.name %></li>
          <%end%>
        </ul>
      </div>
    </div>
  </div>
  <div class="global-data">
    <div class="xdata-box">
      <h3>课消排行榜</h3>
      <div id="coursConsumption"></div>
    </div>
    <div class="pdata-box clearfix">
      <div id="classRoom"></div>
      <div id="consuType"></div>
      <div id="courseType"></div>
      <div id="coType"></div>
    </div>
  </div>
<script>
// 导师课消
var myChart = echarts.init(document.getElementById('coursConsumption'));
var course_name_range_arr = <%== @course_name_range_arr %>;
var course_reckons_range_arr = <%== @course_reckons_range_arr %>;
option = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['2011年', '2012年']
  },
  grid: {
    left: '10%',
    right: '7%',
    top: '1%',
    containLabel: false
  },
  toolbox: {
    show : true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type : 'category',
    axisLabel:{
      interval:0,
      rotate:0,
      margin:2,
      textStyle:{
        color:"#222"
      }},
    data: course_name_range_arr
  },
  series: [
  {
    name: '今天',
    type: 'bar',
    data: course_reckons_range_arr
  }
  ]
};

myChart.setOption(option);

//教室使用占比
var myChart1 = echarts.init(document.getElementById('classRoom'));
var room_course_reckons_arr = <%== @room_course_reckons_arr %>;

option1 = {
  color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  title : {
    text: '教室使用占比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: room_course_reckons_arr
  }
  ]
};
myChart1.setOption(option1);
// 消费类型比
var myChart2 = echarts.init(document.getElementById('consuType'));
var sale_type_course_reckons_arr = <%== @sale_type_course_reckons_arr %>;

option2 = {
  title : {
    text: '消费类型比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['单次售卖课程','打包售卖课程']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: sale_type_course_reckons_arr
  }
  ]
};
myChart2.setOption(option2);
// 课程类型课消比
var myChart3 = echarts.init(document.getElementById('courseType'));
var course_type_course_reckons_arr = <%== @course_type_course_reckons_arr %>;

option3 = {
  title : {
    text: '课程类型课消比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['私教','特色课','常规课']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: course_type_course_reckons_arr
  }
  ]
};
myChart3.setOption(option3);
// 消费方式比
var myChart4 = echarts.init(document.getElementById('coType'));
var pay_way_course_reckons_arr = <%== @pay_way_course_reckons_arr %>;

option4 = {
  title : {
    text: '消费方式比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['次卡','售卖课程','充值','年卡', '月卡']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: pay_way_course_reckons_arr
  }
  ]
};
myChart4.setOption(option4);
</script>
</div>
<script src="/assets/js/common-list.js"></script>
<script type="text/javascript">
  $(".cours-gbtn .list-box li").on("click", function() {
    $(this).parent().parent().find("span").attr("data_id", $(this).attr("data_id"));
    transD = $(this).attr("data_id");
    $.ajax({
      type:'get', url:"/admin/statistical_datum/change_curriculum?studio_id="+ transD,
      success: function(data) {
        if (data.error) {
        // console.log("wrong");
        } 
      }
    });
  });
</script>
